<!doctype html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blog/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=5.1.0" />






<meta name="description" content="小思">
<meta property="og:type" content="website">
<meta property="og:title" content="XiaoSi">
<meta property="og:url" content="https://rsl140.github.io/blog/index.html">
<meta property="og:site_name" content="XiaoSi">
<meta property="og:description" content="小思">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="XiaoSi">
<meta name="twitter:description" content="小思">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://rsl140.github.io/blog/"/>





  <title> XiaoSi </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  














  
  
    
  

  <div class="container sidebar-position-left 
   page-home 
 ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">XiaoSi</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2019/07/17/BEM/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2019/07/17/BEM/" itemprop="url">
                  代码规范备忘
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-07-17T11:01:58+08:00">
                2019-07-17
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2019/07/17/BEM/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/07/17/BEM/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>提高代码质量、统一代码规范</p>
</blockquote>
<p><a href="https://juejin.im/post/5d1c6550518825330a3bfa01">参考资料</a><br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2019/07/17/BEM/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2019/03/17/koaVueMsql/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2019/03/17/koaVueMsql/" itemprop="url">
                  koa2+vue2+mysql 全栈开发记录
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-03-17T16:05:53+08:00">
                2019-03-17
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/FE/" itemprop="url" rel="index">
                    <span itemprop="name">FE</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2019/03/17/koaVueMsql/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/03/17/koaVueMsql/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <p>&gt;</p>
<h1 id="koa2-vue2-mysql-全栈开发记录"><a href="#koa2-vue2-mysql-全栈开发记录" class="headerlink" title="koa2+vue2+mysql 全栈开发记录"></a>koa2+vue2+mysql 全栈开发记录</h1><blockquote>
<p>基于想要自己制作一个个人项目为由，于是有了这么一个开发记录（梳理开发过程也是一个知识巩固的过程）</p>
</blockquote>
<h2 id="koa2-vue2-mysql-个人的一个通用DEMO-本篇文章的范例"><a href="#koa2-vue2-mysql-个人的一个通用DEMO-本篇文章的范例" class="headerlink" title="koa2+vue2+mysql 个人的一个通用DEMO(本篇文章的范例)"></a>koa2+vue2+mysql 个人的一个通用DEMO(本篇文章的范例)</h2><p><a href="https://github.com/rsl140/FE-demo">koa2+vue2+mysql GITHUB地址</a></p>
<h2 id="前端工具"><a href="#前端工具" class="headerlink" title="前端工具"></a>前端工具</h2><ul>
<li>vue</li>
<li>vue-router</li>
<li>vuex</li>
<li>axios</li>
<li>element ui <code>页面UI组件</code></li>
<li>echartsjs <code>百度强大的图表展示</code></li>
<li>vue-admin-template <code>花裤衩大佬的一个实用管理后台模版</code> <a href="https://segmentfault.com/a/1190000009275424">配套教程</a></li>
<li>vue-i18n <code>国际化</code></li>
<li>scss
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2019/03/17/koaVueMsql/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2019/02/26/koa2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2019/02/26/koa2/" itemprop="url">
                  koa2 初探
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-02-26T22:29:59+08:00">
                2019-02-26
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/node/" itemprop="url" rel="index">
                    <span itemprop="name">node</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2019/02/26/koa2/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/02/26/koa2/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>使用koa框架编写后台</p>
</blockquote>
<h1 id="构建项目"><a href="#构建项目" class="headerlink" title="构建项目"></a>构建项目</h1><ul>
<li>通过项目生成器生成 <a href="https://github.com/17koa/koa-generator">koa-generator</a>koa2项目</li>
</ul>
<h2 id="安装-koa-generator"><a href="#安装-koa-generator" class="headerlink" title="安装 koa-generator"></a>安装 koa-generator</h2><ul>
<li>1.<code>npm install -g koa-generator</code></li>
<li>2.<code>koa2 /server &amp;&amp; cd /server</code></li>
<li>3.<code>npm install</code><h2 id="运行"><a href="#运行" class="headerlink" title="运行"></a>运行</h2></li>
<li><code>npm start</code></li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2019/02/26/koa2/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2019/01/16/echarts/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2019/01/16/echarts/" itemprop="url">
                  vue中使用echarts 使用记录
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-01-16T16:52:19+08:00">
                2019-01-16
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/FE/" itemprop="url" rel="index">
                    <span itemprop="name">FE</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2019/01/16/echarts/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2019/01/16/echarts/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>仅以此记录下个人使用echart的方法，毕竟好记性不如烂笔头。</p>
</blockquote>
<h1 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h1><p><a href="https://segmentfault.com/a/1190000009762198">手摸手，带你用vue撸后台 系列三(实战篇)</a></p>
<h1 id="安装echarts"><a href="#安装echarts" class="headerlink" title="安装echarts"></a>安装echarts</h1><p><code>npm install echarts --save</code></p>
<h1 id="echarts-package版本"><a href="#echarts-package版本" class="headerlink" title="echarts package版本"></a>echarts package版本</h1><p><code>&quot;echarts&quot;: &quot;^4.2.0-rc.2&quot;</code><br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2019/01/16/echarts/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2018/12/21/scrollTopFaileSetValue/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2018/12/21/scrollTopFaileSetValue/" itemprop="url">
                  vue scrollTop 无法赋值
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-12-21T16:48:36+08:00">
                2018-12-21
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/FE/" itemprop="url" rel="index">
                    <span itemprop="name">FE</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2018/12/21/scrollTopFaileSetValue/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2018/12/21/scrollTopFaileSetValue/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>vue scrollTop 无法赋值</p>
</blockquote>
<h2 id="遇到问题"><a href="#遇到问题" class="headerlink" title="遇到问题"></a>遇到问题</h2><p><code>container.scrollTop 一直为0</code>不能赋值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">watch: &#123;</div><div class="line">  historyList () &#123;</div><div class="line">    <span class="keyword">this</span>.$nextTick(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</div><div class="line">      <span class="keyword">const</span> container = <span class="keyword">this</span>.$el.querySelector(<span class="string">'.scrolldivmain'</span>)</div><div class="line">      <span class="built_in">console</span>.log(container.scrollHeight)</div><div class="line">      <span class="built_in">console</span>.log(container.scrollTop)</div><div class="line">      <span class="keyword">this</span>.$refs.scrolldiv.scrollTo(<span class="number">0</span>, container.scrollHeight + <span class="string">'px'</span>)</div><div class="line">      container.scrollTop = container.scrollHeight</div><div class="line">      container.scrollTop(<span class="number">0</span>, container.scrollHeight)</div><div class="line">      <span class="built_in">console</span>.log(container.scrollTop) <span class="comment">// container.scrollTop 一直为0</span></div><div class="line">    &#125;)</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2018/12/21/scrollTopFaileSetValue/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2018/06/27/protobuf/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2018/06/27/protobuf/" itemprop="url">
                  vue中使用protobuf踩坑记
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-27T10:16:22+08:00">
                2018-06-27
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/FE/" itemprop="url" rel="index">
                    <span itemprop="name">FE</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2018/06/27/protobuf/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2018/06/27/protobuf/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>因公司需求需使用protobuf，然后就有了这个踩坑记录</p>
</blockquote>
<h1 id="什么是protobuf？"><a href="#什么是protobuf？" class="headerlink" title="什么是protobuf？"></a>什么是protobuf？</h1><p>官方解释为：</p>
<blockquote>
<p>Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages. You can even update your data structure without breaking deployed programs that are compiled against the “old” format.</p>
</blockquote>
<p>翻译是(机翻—我英语不好)</p>
<blockquote>
<p>协议缓冲区是用于序列化结构化数据的灵活，高效的自动化机制 - 思考XML，但更小，更快，更简单。您可以定义一次数据的结构，然后您可以使用特殊的源代码轻松地将结构化数据写入各种数据流并使用各种语言读取和读取数据。您甚至可以更新您的数据结构，而不会中断根据“旧”格式编译的已部署程序。</p>
</blockquote>
<p>特点：</p>
<ul>
<li>更简单</li>
<li>是3到10倍小</li>
<li>速度要快20到100倍</li>
<li>不太模糊</li>
<li>生成更易于以编程方式使用的数据访问类
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2018/06/27/protobuf/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2018/06/19/fbs/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2018/06/19/fbs/" itemprop="url">
                  分布式部署安装方案
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-19T01:08:10+08:00">
                2018-06-19
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2018/06/19/fbs/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2018/06/19/fbs/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>之前因为公司的产品需求，研究过分布式方案，最近抽空整理了下</p>
</blockquote>
<h1 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h1><ul>
<li>主要是以<code>nginx</code>搭载<code>keepalived</code>实现 web 业务服务器 <code>keepalives</code>防止单点故障</li>
<li><code>reids</code>分布式缓存</li>
<li><code>fastdfs</code>分布式文件</li>
<li><code>postgre-xl</code>分布式数据库服务器</li>
</ul>
<blockquote>
<p>简单说，分布式是以缩短单个任务的执行时间来提升效率的，而集群则是通过提高单位时间内执行的任务数来提升效率。</p>
</blockquote>
<p><a href="https://segmentfault.com/a/1190000002418709">参考</a></p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2018/06/19/fbs/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2018/01/06/nginx/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2018/01/06/nginx/" itemprop="url">
                  nginx安装
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-01-06T17:51:49+08:00">
                2018-01-06
              </time>
            

            

            
          </span>

          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2018/01/06/nginx/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2018/01/06/nginx/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>安装nginx</p>
</blockquote>
<h1 id="安装开发环境"><a href="#安装开发环境" class="headerlink" title="安装开发环境"></a>安装开发环境</h1><blockquote>
<p>Ububtu16.4安装方法：</p>
</blockquote>
<p>安装g++只需要一条命令就可以了：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">$ sudo apt-get install build-essential <span class="comment">#除了g++外，这条命令还会安装libc6-dev，make等好东东，很方便</span></div></pre></td></tr></table></figure></p>
<blockquote>
<p>CentOS7安装方法：</p>
</blockquote>
<p><code>yum install gcc-c++</code></p>
<h2 id="pcre-zlib-ssl安装"><a href="#pcre-zlib-ssl安装" class="headerlink" title="pcre zlib ssl安装"></a>pcre zlib ssl安装</h2><p>一般我们都需要先装pcre, zlib，前者为了重写rewrite，后者为了gzip压缩。</p>
<p>1.选定目录<br><code>cd /usr/local/src</code>以下下载文件均放置在次文件夹下 请使用sudo权限</p>
<h3 id="pcre"><a href="#pcre" class="headerlink" title="pcre"></a>pcre</h3><p><a href="ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/">下载地址:ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/</a></p>
<blockquote>
<p>Ububtu16.4安装方法：</p>
</blockquote>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.41.tar.gz</div><div class="line">tar -zxvf pcre-8.41.tar.gz</div><div class="line"><span class="built_in">cd</span> pcre-8.34</div><div class="line">./configure</div><div class="line">make</div><div class="line">make install</div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2018/01/06/nginx/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2017/10/31/vue/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2017/10/31/vue/" itemprop="url">
                  Vue2.0
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-31T16:28:08+08:00">
                2017-10-31
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/FE/" itemprop="url" rel="index">
                    <span itemprop="name">FE</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2017/10/31/vue/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/10/31/vue/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>vue搭建后台管理页面(刚接触，踩了很多坑，好记性不如烂笔头，还是需要多多总结)</p>
</blockquote>
<p>转载请注明出处</p>
<p>参考资料：<br><a href="https://cn.vuejs.org/v2/guide/installation.html">Vue</a>，<a href="https://router.vuejs.org/zh-cn/">Vue-router</a>，<a href="http://www.muse-ui.org/#/install">muse-ui</a></p>
<h1 id="用vue-cli脚手架创建一个基于webpack的Vue项目"><a href="#用vue-cli脚手架创建一个基于webpack的Vue项目" class="headerlink" title="用vue-cli脚手架创建一个基于webpack的Vue项目"></a>用vue-cli脚手架创建一个基于webpack的Vue项目</h1><p>环境：node<br>全局安装vue-cli脚手架：<code>npm install -g vue-cli</code>(安装过慢请尝试使用淘宝镜像)<br>新建文件夹后，命令行输入<code>vue init webpack 项目名</code>.<br><code>npm install</code>安装依赖项，开发调试请使用<code>npm run dev</code><br><code>npm install --save muse-ui</code>安装页面插件<br>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2017/10/31/vue/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2017/10/23/natapp/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                
                <a class="post-title-link" href="/blog/2017/10/23/natapp/" itemprop="url">
                  本地开发公众号(测试号)
                </a>
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-10-23T11:48:08+08:00">
                2017-10-23
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/wechat/" itemprop="url" rel="index">
                    <span itemprop="name">wechat</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2017/10/23/natapp/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/10/23/natapp/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <blockquote>
<p>微信开发全过程(node)</p>
</blockquote>
<h1 id="本地进行微信公众号的开发和调试"><a href="#本地进行微信公众号的开发和调试" class="headerlink" title="本地进行微信公众号的开发和调试"></a>本地进行微信公众号的开发和调试</h1><p>最开始是放在个人服务器上的。但是每次测试时部署麻烦，后来尝试使用<a href="https://natapp.cn">natapp.cn</a>通过内网穿透实现本地测试。</p>
<p>注册后，可以尝试先使用免费的。<a href="https://natapp.cn/article/natapp_newbie">网站自带教程点击这里</a></p>
<p>由于我是mac电脑 使用natapp需要先授权<code>chmod a+x natapp</code>然后运行<code>./natapp</code>(推荐使用<code>config.ini</code>方式，配置好<code>authtoken</code>，放在同级目录下即可)</p>
<p>链接时遇到一直链接不上服务器的问题，仔细看了下教程，应该是DNS问题，修改本地DNS为阿里云公共DNS：<code>223.5.5.5</code> <code>223.6.6.6</code>后，成功链接。</p>
<h1 id="账号链接-测试号"><a href="#账号链接-测试号" class="headerlink" title="账号链接(测试号)"></a>账号链接(测试号)</h1><h2 id="微信接口配置信息"><a href="#微信接口配置信息" class="headerlink" title="微信接口配置信息"></a>微信接口配置信息</h2><p>URL：填写服务器地址(需有appid信息相符才能验证成功)<br>Token：任意填写(后面的配置需与填写的一致)</p>
<h2 id="创建项目"><a href="#创建项目" class="headerlink" title="创建项目"></a>创建项目</h2><p>开发语言：node.js<br>开发框架：express，express教程参考<a href="http://expressjs.com/">官网</a><br>插件：<a href="https://github.com/node-webot/wechat">wechat</a>、<a href="https://github.com/node-webot/wechat-api">wechat-api</a></p>
<h2 id="建立接口链接"><a href="#建立接口链接" class="headerlink" title="建立接口链接"></a>建立接口链接</h2><h3 id="创建路由"><a href="#创建路由" class="headerlink" title="创建路由"></a>创建路由</h3>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/blog/2017/10/23/natapp/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <div>
      
    </div>

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/blog/page/2/">2</a><a class="page-number" href="/blog/page/3/">3</a><a class="extend next" rel="next" href="/blog/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/blog/uploads/1.jpg"
               alt="Summer" />
          <p class="site-author-name" itemprop="name">Summer</p>
           
              <p class="site-description motion-element" itemprop="description">小思</p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/blog/archives/">
                <span class="site-state-item-count">27</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/blog/categories/index.html">
                <span class="site-state-item-count">8</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/blog/tags/index.html">
                <span class="site-state-item-count">17</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="http://github.com/rsl140" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://segmentfault.com/u/xiaosi_58ec6bdf9eaab" target="_blank" title="Segmentfault">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  Segmentfault
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Summer</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user">本站访客数</i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      人次
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye">本站总访问量</i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      次
    </span>
  
</div>


        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  



  
  <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  
  <script type="text/javascript" src="/blog/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.0"></script>



  
  

  

  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.0"></script>



  



  

    <script type="text/javascript">
      var disqus_shortname = 'xiaosi';
      var disqus_identifier = 'index.html';

      var disqus_title = "";


      function run_disqus_script(disqus_script) {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      }

      run_disqus_script('count.js');

      

    </script>
  













  





  

  

  

  

</body>
</html>
